<template>
    <div class="product">
        <div class="content">
            <h4>帮助中心</h4>
            <el-card>
                <p>致所有爱心人士：</p>
                <p class="content_main">
                    您们的爱心与捐款我如数收到，衷心地感谢您们慷慨解囊和无私帮助，在我困难的时候向我伸出援助之手，相信爱就是幸福的主宰，相信爱就是改变的力量，相信爱会有无限的希望。
                </p>
            </el-card>
            <div style="padding:20px;">
                <div class="help_item" @click="handleToHepl1">
                    <img src="../../assets/imgs/help2.png" alt="">
                    <span>捐款</span>
                </div>
                <div class="help_item" @click="handleToHepl2">
                    <img src="../../assets/imgs/help1.png" alt="">
                    <span>捐物资</span>
                </div>
            </div>
            <el-dialog title="捐赠物资信息" :visible.sync="wzModal">
            <el-form label-position="left">
              <el-form-item label="物资名称">
                <el-input v-model="form1.name"></el-input>
                </el-form-item>
                <el-form-item label="物资数量(件、kg)">
                <el-input type="number" v-model.number="form1.count"></el-input>
                </el-form-item>
            </el-form>
        <div class="btns">
            <el-button @click="handleSure1" type="warning">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="捐款信息" :visible.sync="moneyModal">
            <el-form label-position="left">
              <el-form-item label="捐款人">
                <el-input v-model="form.fundraiser"></el-input>
                </el-form-item>
                <el-form-item label="金额(元)">
                <el-input type="number" v-model.number="form.amount"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                <el-input type="number" v-model.number="form.phone"></el-input>
                </el-form-item>
            </el-form>
        <div class="btns">
            <el-button @click="handleSure" type="warning">确定</el-button>
        </div>
      </el-dialog>
        </div>
    </div>
</template>
<script>
import {moneyHelp,wzHelp} from '../../api'
export default {
    name: 'product',
    data(){
        return {
            wzModal:false,
            moneyModal:false,
            form:{},
            form1:{}
        }
    },
    mounted(){
        
    },
    methods:{
        handleToHepl1(){
            this.moneyModal=true
        },
        handleToHepl2(){
            this.wzModal=true
        },
        handleSure(){
            moneyHelp(this.form).then(res=>{
                if(res.code==200){
                    this.$message.success('捐助成功！')
                    this.moneyModal=false
                }
            })
        },
        handleSure1(){
            wzHelp(this.form1).then(res=>{
                if(res.code==200){
                    this.$message.success('捐助成功！')
                    this.wzModal=false
                }
            })
        }
    }
  
}
</script>
<style lang="scss" scoped>
    .product{
        width: 100%;
        height: calc(100vh - 120px);
        .content{
            width: 1000px;
            margin: 0 auto;
            text-align: left;
        }
        h4{
            line-height: 80px;
        }
    }
    .content_main{
        text-indent: 2em;
        line-height: 40px;
    }
    .help_item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 140px;
        cursor: pointer;
        &:hover{
            color: red;
            opacity: 0.6;
        }
        img{
            width: 64px;
            height: 64px;
            border-radius: 50%;
            overflow: hidden;
        }
    }
</style>
